<script setup>
import { io } from 'socket.io-client'
import { useRoute} from 'vue-router'
import Quill from 'quill'
import "quill/dist/quill.core.css"
import 'quill/dist/quill.snow.css'
import { ref, onMounted } from 'vue'

const editorRef = ref(null)
let editor
onMounted(() => {
    editor = new Quill(editorRef.value, { theme: "snow" })
    editor.on("text-change", (delta, content, source) => {
        if(source=="user") socket.emit("input",delta)
    })
})
const $route = useRoute()
const { username } = $route.query
const socket = io("ws://127.0.0.1:3333/shareDoc");
const socketId=ref("")
socket.on("connect", () => {
    socketId.value=socket.id
});
socket.on("disconnect", () => {
    // console.log("socketio::"+socket.id)
});
const userMap = ref({})
socket.emit("init", { username })
socket.on("updateUser", (newUserMap) => {
    userMap.value = newUserMap
})
socket.on("pushDeltaEveryone",({delta,id})=>{
    if(id!=socketId.value) editor.updateContents(delta)
})

</script>

<template>
    <div class="sharedoc_container">
        <h1 class="title">共享文档</h1>
        <div style="display: flex;flex:1">
            <ul style="width: 200px;">
                <li v-for="(value, key) in userMap" :key="key" class="user_title">{{ value }}</li>
            </ul>
            <div style="flex: 1;overflow: auto;">
                <div ref="editorRef" ></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
.sharedoc_container {
    height: 100vh;
    width: 99vw;
    display: flex;
    flex-direction: column;
    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 800;
        text-align: center;
        background-color: #ccc;
    }
}
</style>